<template>
  <div class="p-4">
    <GrowCard :loading="loading" class="enter-y" />
    <ChartMiniCard class="!my-4 enter-y" :loading="loading" />
    <div class="!my-4 enter-y">
      <a-row>
        <a-col :xl="17" :lg="12" :md="12" :sm="24" :xs="24">
          <SiteAnalysis :loading="loading" />
        </a-col>
        <a-col :xl="7" :lg="12" :md="12" :sm="24" :xs="24">
          <Card title="预充值统计" v-bind="$attrs" :loading="loading">
            <VisitSource class="!md:mx-4" :loading="loading" />
          </Card>
        </a-col>
      </a-row>
    </div>
    <a-row class="!my-4 enter-y">
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问量统计">
          <template #extra>
            <a-radio-group v-model:value="terminal" @change="initLogInfo">
              <a-radio :value="0">系统管理</a-radio>
              <a-radio :value="1">中台</a-radio>
              <a-radio :value="2">B端</a-radio>
            </a-radio-group>
          </template>
          <a-row>
            <a-col :span="6">
              <HeadInfo title="今日IP" :content="logInfo.todayIp" icon="environment"></HeadInfo>
            </a-col>
            <a-col :span="6">
              <HeadInfo title="今日访问" :content="logInfo.todayVisitCount" icon="team"></HeadInfo>
            </a-col>
            <a-col :span="6">
              <HeadInfo title="总访问量" :content="logInfo.totalVisitCount" icon="rise"></HeadInfo>
            </a-col>
          </a-row>
          <LineMulti :chartData="lineMultiData" height="50vh" type="line" :option="{ legend: { top: 'bottom' } }"></LineMulti>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {Card} from 'ant-design-vue';
import GrowCard from '../components/GrowCard.vue';
import ChartMiniCard from '../components/ChartMiniCard.vue';
import SiteAnalysis from '../components/SiteAnalysis.vue';
import VisitSource from '../components/VisitSource.vue';
import LineMulti from '/@/components/chart/LineMulti.vue';
import HeadInfo from '/@/components/chart/HeadInfo.vue';
import {getLoginfo, getVisitInfo} from '../api';

const loading = ref(true);
  const logInfo = ref({});
  const lineMultiData = ref([]);
  const terminal = ref<number>(0);

  setTimeout(() => {
    loading.value = false;
  }, 1000);

  /**
   * 获取访问量统计
   */
  function initLogInfo() {
    getLoginfo({terminal: terminal.value}).then((res) => {
      if (res.success) {
        Object.keys(res.result).forEach((key) => {
          res.result[key] = res.result[key] + '';
        });
        logInfo.value = res.result;
      }
    });
    getVisitInfo({terminal: terminal.value}).then((res) => {
      if (res.success) {
        lineMultiData.value = [];
        res.result.forEach((item) => {
          lineMultiData.value.push({ name: item.type, type: 'ip', value: item.ip });
          lineMultiData.value.push({ name: item.type, type: 'visit', value: item.visit });
        });
      }
    });
  }
  initLogInfo();

</script>
